<template>
  <div>
    <el-table
      :data="tData"
      ref="multipleTable"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <!-- <el-table-column
        prob="image"
        label="图片"
        width="220">
        <template slot-scope="scope">
            <img :src="scope.row.image" min-width="70" height="70"/>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="name"
        label="名称"
        width="220">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="220">
      </el-table-column>
      <!-- <el-table-column 
        prop="number"
        label="数量" 
        width="220">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.number" @change="handleChange" :min="1" :max="10"></el-input-number>
        </template>
      </el-table-column> -->
      <el-table-column label="操作">
        <template slot-scope="scope">
         <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">添加</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">清空选择</el-button>
    </div>
    <div><el-button @click="addOrders" type="primary">加入购物车</el-button></div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
    export default {
      data() {
        return {
          tableData: [{
            image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            name: '香辣鸡腿堡',
            price: '15',
            number: '1'
          }, {
            image: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
            name: '香辣鸡腿堡',
            price: '15',
            number: '1'
          }],
          multipleSelection: [],
          tData: [{name: 'testName'}],
          params: []
        }
      },
      created() {
          this.getKFC();
      },
      methods: {
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
          this.params = [];
        },
        handleSelectionChange(val) {
          console.log(val);
          this.multipleSelection = val;
        },
        handleChange(value) {
            console.log(value);
        },
        handleEdit(index, row) {
          console.log(index, row);
          this.params.push(row.name);
        },
        handleDelete(index, row) {
          console.log(index, row);
          for (let i = 0; i < this.params.length; i++) {
            if (this.params[i] === row.name) {
              this.params.splice(i, 1);
              break;
            } 
          }
        },
        async getKFC() {
          axios.post(`http://127.0.0.1:4523/m1/2014124-0-default/student/KFC/`,{
        })
        .then((res) => { 
          this.tData = res.data;
          console.log("post data")
          console.log(this.tData)
        })
        },
        async addOrders() {
          console.log("addOrders!");
          console.log(this.params);
          const { data: resp } = await this.$http.post(`http://127.0.0.1:4523/m1/2014124-0-default/student/KFC/`, this.params);
          if (resp == 400) return this.$message.error(resp.msg);//对于返回值做了一个处理
        }
      }
    }
  </script>